<template>
  <div>
    用户名: <input type="text" v-model="username">
    姓名: <input type="text" v-model="fullname">
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '刘德华',
    }
  },
  // 计算属性的简单写法, 只能获取数据, 不能修改数据
  // 如果要访问计算属性, 会自动执行get方法; 如果要修改计算属性, 会执行set方法
  computed: {
    fullname: {
      // get函数就等同于简单写法的函数
      // 计算属性必须要有get, 而且需要返回结果
      get() {
        return this.username
      },
      // 如果要修改计算属性, 就需要用到set函数
      // set方法第一个参数就是用户赋给计算属性的值
      set(val) {
        console.log(val);
        this.username = val
      },
    }
  }
}
</script>

<style>

</style>
